<template>
  <draggable
    v-model="data"
    group="people"
    @start="drag = true"
    @end="drag = false"
    ghost-class="ghost"
    v-bind="dragOptions"
    @change="handleChange"
  >
    <div v-for="(item, index) in data" :key="index">
      {{ item.name + item.age + item.address }}
    </div>
  </draggable>
</template>
<script>
import draggable from "vuedraggable";
const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["loser"],
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
];

export default {
  data() {
    return {
      data,
    };
  },
  components: {
    draggable,
  },
  methods: {
    handleChange(val) {
      console.log("val", val);
    },
  },
  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost",
      };
    },
  },
};
</script>
<style scoped>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>
